<template>
  <view class="nfc-status" :class="{ active: isValid }">
    <text v-if="isValid" class="value">
      <text class="icon">🔖</text>
      已读取：<text class="id">{{ formattedId }}</text>
    </text>
    <text v-else class="placeholder">📱 请放置NFC卡片...</text>
  </view>
</template>

<script>
export default {
  props: {
    nfcId: {
      type: String,
      default: ''
    }
  },
  computed: {
    isValid() {
      return /^[0-9a-f]{6}$/i.test(this.nfcId)
    },
    formattedId() {
      return this.nfcId.padStart(6, '0').toUpperCase()
    }
  }
}
</script>

<style scoped>
.nfc-status {
  padding: 20rpx;
  border-radius: 10rpx;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
  font-size: 28rpx;
  color: #666;
  transition: all 0.3s ease;
}

.active {
  background: #e8f5e9;
  color: #2e7d32;
}

.value {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.icon {
  font-family: 'MaterialIcons';
  font-size: 32rpx;
}

.id {
  font-family: 'monospace';
  font-size: 36rpx;
  color: #1e88e5;
}

.placeholder {
  opacity: 0.6;
}
</style>